<template>
  <AvicModal :visible="true" width="1200px" height="580px" :centered="true" class="currentStep-model" @cancel="closeModal">
    <template #title>
      创建采购订单
      <span class="guided-form-sub-title">
        创建人：{{ proxy.$getLoginUser.name }} | 采购订单包含抬头、明细、条款等内容
      </span>
    </template>
    <a-spin :spinning="loading">
      <a-steps :current="currentStep" @change="(current) => onNextStep(current - currentStep)">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" :description="item.description" />
      </a-steps>
      <a-alert type="info" closable :style="{ margin: '12px 16px' }">
        <template #message>
          {{ stepDescribe[currentStep] }}
        </template>
      </a-alert>
      <div v-show="currentStep === 0" class="avic-currentStep-content">
        <DemoMainNestAddStep1 ref="demoMainNestStep1" :form="form" />
      </div>
      <div v-show="currentStep === 1" class="avic-currentStep-content">
        <DemoMainNestAddStep2 ref="demoMainNestStep2" :form="form" />
      </div>
      <div v-show="currentStep === 2" class="avic-currentStep-content">
        <DemoMainNestAddStep3 ref="demoMainNestStep3" :form="form" @close="closeModal" @reloadData="reloadData" />
      </div>
    </a-spin>
    <template #footer>
      <a-button title="返回" type="primary" ghost @click="closeModal">退出</a-button>
      <a-button v-if="currentStep === 0" title="保存当前步骤" type="primary" ghost @click="saveFormStep1">
        保存当前步骤
      </a-button>
      <a-button v-if="currentStep > 0" type="primary" ghost @click="onNextStep(-1)">上一步</a-button>
      <a-button v-if="currentStep < steps.length - 1" type="primary" @click="onNextStep(1)">下一步</a-button>
      <a-button v-if="currentStep === steps.length - 1" type="primary" :loading="loading" @click="saveForm">
        保存
      </a-button>
    </template>
  </AvicModal>
</template>
<script lang="ts" setup>
import { useDemoMainNestForm, emits } from './ts/DemoMainNestForm'; // 引入表单ts
import DemoMainNestAddStep1 from './DemoMainNestAddStep1.vue';
import DemoMainNestAddStep2 from './DemoMainNestAddStep2.vue';
import DemoMainNestAddStep3 from './DemoMainNestAddStep3.vue';

const props = defineProps({
  formId: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(emits);

const {
  proxy,
  currentStep,
  steps,
  stepDescribe,
  form,
  loading,
  saveForm,
  saveFormStep1,
  closeModal,
  reloadData,
  onNextStep,
  demoMainNestStep1,
  demoMainNestStep2,
  demoMainNestStep3
} = useDemoMainNestForm({
  props,
  emit
});
</script>
